<template>
  <div>
    <TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
    <div class="container">
      <TableCustom
        :columns="columns"
        :tableData="tableData"
        :total="page.total"
        :current-page="page.index"
        :page-size="page.size"
        :viewFunc="handleView"
        :delFunc="handleDelete"
        :changePage="changePage"
        :editFunc="handleEdit"
      >
        <template #toolbarBtn>
          <el-button type="warning" :icon="CirclePlusFilled" @click="visible = true">
            新增
          </el-button>
        </template>
      </TableCustom>
    </div>
    <el-dialog
      :title="isEdit ? '编辑' : '新增'"
      v-model="visible"
      width="700px"
      destroy-on-close
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="updateData" />
    </el-dialog>
    <el-dialog title="查看详情" v-model="visible1" width="700px" destroy-on-close>
      <TableDetail :data="viewData"></TableDetail>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="system-user">
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { CirclePlusFilled } from '@element-plus/icons-vue/global';
import type { User } from '@/types/user';

import TableCustom from '@/components/table-custom.vue';
import TableSearch from '@/components/table-search.vue';
import type { TableColumn } from '@/types/table-column';
import type { FormOption, FormOptionList } from '@/types/form-option';
import { fetchUserData } from '@/api';
import type { UserItem } from '@/types/api.d';
import userData from '../../../mock/user.json';

// 查询相关
const query = reactive({
  name: '',
});
const searchOpt = ref<FormOptionList[]>([{ type: 'input', label: '用户名：', prop: 'name' }]);
const handleSearch = () => {
  changePage(1);
};

// 表格相关
let columns = ref([
  { type: 'index', label: '序号', width: 55, align: 'center' },
  { prop: 'name', label: '用户名' },
  { prop: 'phone', label: '手机号' },
  { prop: 'role', label: '角色' },
  { prop: 'operator', label: '操作', width: 250 },
]);
const page = reactive({
  index: 1,
  size: 10,
  total: 0,
});

const tableData = ref<User[]>([]);
const getData = async () => {
  const res = userData;
  let filteredList = res.data.list;
  
  // 根据搜索条件过滤数据
  if (query.name) {
    filteredList = filteredList.filter(item => 
      item.name.includes(query.name)
    );
  }
  
  // 更新总条数为过滤后的数据长度
  page.total = filteredList.length;
  
  // 实现分页逻辑，只取当前页的数据
  const start = (page.index - 1) * page.size;
  const end = start + page.size;
  tableData.value = filteredList.slice(start, end).map((item: UserItem) => ({
    id: item.id,
    name: item.name,
    password: item.password,
    email: item.email,
    phone: item.phone,
    role: item.role,
    date: item.date,
  }));
};
getData();

const changePage = (val: number) => {
  page.index = val;
  getData();
};

// 新增/编辑弹窗相关
let options = ref<FormOption>({
  labelWidth: '100px',
  span: 12,
  list: [
    { type: 'input', label: '用户名', prop: 'name', required: true },
    { type: 'input', label: '手机号', prop: 'phone', required: true },
    { type: 'input', label: '密码', prop: 'password', required: true },
    { type: 'input', label: '邮箱', prop: 'email', required: true },
    { type: 'input', label: '角色', prop: 'role', required: true },
  ],
});
const visible = ref(false);
const isEdit = ref(false);
const rowData = ref({});
const handleEdit = (row: User) => {
  rowData.value = { ...row };
  isEdit.value = true;
  visible.value = true;
};
const updateData = () => {
  closeDialog();
  getData();
};

const closeDialog = () => {
  visible.value = false;
  isEdit.value = false;
};

// 查看详情弹窗相关
const visible1 = ref(false);
const viewData = ref<{
  row: User;
  list: TableColumn[];
}>({
  row: {} as User,
  list: [],
});
const handleView = (row: User) => {
  viewData.value.row = { ...row };
  viewData.value.list = [
    {
      prop: 'id',
      label: '用户ID',
    },
    {
      prop: 'name',
      label: '用户名',
    },
    {
      prop: 'password',
      label: '密码',
    },
    {
      prop: 'email',
      label: '邮箱',
    },
    {
      prop: 'phone',
      label: '电话',
    },
    {
      prop: 'role',
      label: '角色',
    },
    {
      prop: 'date',
      label: '注册日期',
    },
  ];
  visible1.value = true;
};

// 删除相关
const handleDelete = (row: User) => {
  ElMessage.success('删除成功');
};
</script>

<style scoped></style>
